<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(sw,i) in swiperList" :key="i">
        <img v-if="i===0" :src="sw.imgUrl"  @click="$router.push(sw.targetUrl)">
        <img v-else :data-src="sw.imgUrl"  class="swiper-lazy"  @click="$router.push(sw.targetUrl)">
        <div v-if="i > 0" class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        <div class="swiper-content">
          <div class="avator hidden-xs-only"><a-avatar :size="36" :icon="sw.avator"></a-avatar></div>
          <router-link :to="sw.targetUrl">
            <div class="title">{{ sw.title }}</div>
            <div class="intro hidden-xs-only">{{ sw.intro }}</div>
          </router-link>
          <div class="category"><a href="/" target="_blank">{{ sw.category }}</a><i>—</i><time>{{ sw.timeDesc }}</time>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <!--    <div class="swiper-button-next swiper-button-white"></div>-->
    <!--    <div class="swiper-button-prev swiper-button-white"></div>-->
  </div>
</template>

<script>
	import Swiper from 'swiper';

	export default {
		name: 'Swiper',

		components: {},

		props: {},

		data() {
			return {
				swiper: {},
				circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
				swiperOpt: {
					width: undefined,
					lazy: true,
					speed: 500,
					loop: true,
					parallax: false,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
					// navigation: {
					// 	nextEl: '.swiper-button-next',
					// 	prevEl: '.swiper-button-prev',
					// },
					autoplay: {
						delay: 2500,
					},
					spaceBetween: 0,
					watchSlidesVisibility: true,
					watchSlidesProgress: true,
					keyboard: {
						enabled: true,
					},
					// mousewheel: true,
				},
				swiperList: [
					{
						imgUrl: 'https://demo.nicetheme.xyz/panda-pro-style-one/wp-content/uploads/sites/25/2019/06/2019062004540484.jpg',
						title: '5 年估值 80 亿美金，寻找中国版 Peloton | 36氪新风向',
						intro: '健身行业正在迅速变革',
						category: '健身',
						timeDesc: '1周前',
						avator:'//cdn.v2ex.com/gravatar/afa39accf8700cbbe7b13e1d01aa5b17?s=36&d=mm&r=g',
						targetUrl:'/news/1',
					},
					{
						imgUrl: 'https://demo.nicetheme.xyz/panda-pro-style-one/wp-content/uploads/sites/25/2019/06/2019062006030754.jpg',
						title: '出海日报 | Paytm 全资子公司Paytm Money计划筹集高达12亿美元的资金；凯雷或投资Swiggy 2亿美元',
						intro: '东南亚 香港电商平台 Shopline 进入马来西亚。Shopline 已在吉隆坡设立办公室，正式将业务扩展至马来西亚。',
						category: '科技',
						timeDesc: '1周前',
						avator:'//cdn.v2ex.com/gravatar/afa39accf8700cbbe7b13e1d01aa5b17?s=36&d=mm&r=g',
						targetUrl:'/news/2',
					},
					{
						imgUrl: 'https://demo.nicetheme.xyz/panda-pro-style-one/wp-content/uploads/sites/25/2019/06/2019062004540484.jpg',
						title: '5 年估值 80 亿美金，寻找中国版 Peloton | 36氪新风向',
						intro: '健身行业正在迅速变革',
						category: '健身',
						timeDesc: '1周前',
						avator:'//cdn.v2ex.com/gravatar/afa39accf8700cbbe7b13e1d01aa5b17?s=36&d=mm&r=g',
						targetUrl:'/news/3',
					},
					{
						imgUrl: 'https://demo.nicetheme.xyz/panda-pro-style-one/wp-content/uploads/sites/25/2019/06/2019062004540484.jpg',
						title: '5 年估值 80 亿美金，寻找中国版 Peloton | 36氪新风向',
						intro: '健身行业正在迅速变革',
						category: '健身',
						timeDesc: '1周前',
						avator:'//cdn.v2ex.com/gravatar/afa39accf8700cbbe7b13e1d01aa5b17?s=36&d=mm&r=g',
						targetUrl:'/news/4',
					},
					{
						imgUrl: 'https://demo.nicetheme.xyz/panda-pro-style-one/wp-content/uploads/sites/25/2019/06/2019062004540484.jpg',
						title: '5 年估值 80 亿美金，寻找中国版 Peloton | 36氪新风向',
						intro: '健身行业正在迅速变革',
						category: '健身',
						timeDesc: '1周前',
						avator:'//cdn.v2ex.com/gravatar/afa39accf8700cbbe7b13e1d01aa5b17?s=36&d=mm&r=g',
						targetUrl:'/news/5',
					},
				],
      }
		},

		computed: {},

		watch: {},

		created() {
		},

		mounted() {
			this.swiper = new Swiper( '.swiper-container', this.swiperOpt );
		},

		destroyed() {
		},

		methods: {}
	}
</script>

<style lang="scss">
  @import "~swiper/dist/css/swiper.min.css";

  @media only screen and (max-width: 767px) {
    .swiper-container {
      width: 100%;
      height: 300px;
    }
    .swiper-slide > img {
      width: 100%;
      height: 70%;
      position: absolute;
      left: 0;
    }
    .swiper-content {
      width: 100%;
      height: 30%;
      position: absolute;
      bottom: 0;
      background: #222831 !important;
      padding: 0.6rem;
      text-align: left;

      .title, .category {
        display: inline-block;
        color: #fff;
      }

      .title {
        font-size: 1rem;
        @include ellipsis-line(2);
      }

      .category {
        position: absolute;
        bottom: 0.6rem;
        font-size: 0.775rem;

        i {
          margin: 0 10px;
          color: $primary-color;
        }
      }
    }
    .swiper-pagination-bullet {
      width: 10px;
      height: 1.5px;
    }
    .swiper-pagination-bullet-active {
      width: 20px;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: 0.9rem;
      right: 1.5rem;
      left: unset;
      width: 70%;
      text-align: right;
    }
    .swiper-lazy-preloader {
      left: 50%;
      top: 35%;
    }
  }

  @media only screen and (min-width: 768px) {
    .swiper-container {
      height: 300px;
    }
    .swiper-slide > img {
      width: 70%;
      height: 100%;
      position: absolute;
      left: 0;
    }
    .swiper-content {
      height: 100%;
      width: 30%;
      background: #222831 !important;
      position: absolute;
      right: 0;
      padding: 1.5rem;
      text-align: left;

      .avator {
        width: 36px;
        height: 36px;

        img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }

      .title {
        display: block;
        color: #fff;
        margin-top: 2rem;
        @include ellipsis-line(2);
      }

      .intro {
        color: #f2f2f5;
        font-size: 0.875rem;
        margin: 1.5rem 0;
        @include ellipsis-line(6);
      }

      .category {
        position: absolute;
        bottom: 1.5rem;
        font-size: 0.775rem;
        color: #fff;

        a:hover {
          color: #fff;
        }

        i {
          margin: 0 10px;
          color: $primary-color;
        }
      }
    }
    .swiper-pagination-bullet {
      width: 15px;
      height: 2px;
    }
    .swiper-pagination-bullet-active {
      width: 30px;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: 10px;
      left: 0;
      width: 70%;
    }
    .swiper-lazy-preloader {
      left: 35%;
    }
  }

  @media only screen and (min-width: 992px) {
    .swiper-container {
      height: 400px;
    }
    .swiper-content {
      padding: 2rem;
    }
  }

  @media only screen and (min-width: 1200px) {
    .swiper-container {
      height: 500px;

    }
    .swiper-content {
      padding: 3rem;

      .intro {
        @include ellipsis-line(10);
      }
    }
  }

  .swiper-container {
    background: #222831;
    cursor: pointer;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000;
    cursor: pointer;
  }

  .swiper-pagination-bullet {
    border-radius: 0;
    background: #EBEEF5;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }

</style>
